<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<%@page import="com.commerceE.domain.Address, com.commerceE.domain.DictProvince, com.commerceE.domain.DictCity, java.util.*"%> 
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources";%>
<style>

.checkout-address {
	width:95%;
	margin-top:0px;
	margin-bottom:7px;
	padding-left:5px;
	padding-right:5px;
	background:url(<%=baseImagePath%>/images/box-bg.png);
	color: #6e6e6e;
	font:12px/1.5 tahoma,arial,\5b8b\4f53;
}

.checkout-address-end {
    color: #6e6e6e;
	font:12px/1.5 tahoma,arial,\5b8b\4f53;
	width:95%;
	height:120px;
    margin-top:0px;
	margin-bottom:7px;
	margin-left:7px;
	margin-right:7px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:10px;
	border:1px solid #CDCBC4;
	border-radius:3px;
	background:url(<%=baseImagePath%>/images/box-bg.png);
}
</style>
<h2>第一步: 收货人信息</h2>
<%
Object object = request.getAttribute("addressList");
boolean flag = false;
List<Address> addressList = null;
int size=0;
if(object!=null){
	addressList = (List<Address>)object;
	if(addressList.size()>0){
	  size  = addressList.size();
	  flag = true;
	  for(int i=0;i<addressList.size();i++){
		 Address address = addressList.get(i);
		 String addressStr = address.getReciverName()+", "+address.getStateObject().getProvincename()+", "+address.getCityObject().getCityname()+", "+address.getRoadandstreet() + 
				 ", "+address.getPostcode()+", "+address.getPhoneNumber();
%>
		<div class="checkout-address">
			<input onclick="chooseAddress(<%=address.getAddressid() %>,<%=size %>);" name="rd_addr_id" id="updateAddressRadio_<%=i%>" value="0" type="radio"     
			<% if(i==0){ %>
			checked="checked"
			<%} %>
			>
			<span><%=addressStr %></span>&nbsp;&nbsp;
			<a id="edit_0" style="color:#7E3117"  onclick="javascript:updateAddress(<%=i %>,<%=size %>,<%=address.getAddressid() %>);">修改</a><br/>
		</div>
<%	
	  }
	}
}
%>
	<div class="checkout-address">
		<input  onclick="chooseAddress(-1,<%=size %>);" name="rd_addr_id" value="-1" id="rd_new_addr" type="radio"
		<% if(!flag){ %>
			checked="checked"
			<%} %>
		>
		<input value="0" type="hidden">
		<span>使用新地址</span><br/>
		
	</div>
	<form:errors path="*" />
 
	<form method="post"  action="/CommerceFrame/shoppingCart/addressSubmit.html" name="newAddressForm" id="newAddressForm">
	<input type="hidden" name="addressid" value="0" />
	<div class="checkout-address-end" id="newAddress"
	        <% if(flag){ %>
			style="display:none;"
			<%} %>
			>
				<div style="float:left;margin-top:5px;margin-bottom:5px;position:relative;">
					<span>收&nbsp;货&nbsp;人：</span>  
					 <input id="new_reciverName"  maxlength="40" name="reciverName" type="text" />
				</div>
				<div style="float:left;margin-top:5px;margin-bottom:5px;position:relative;">
					<span >&nbsp;</span>
					<select name="state" id="new_state_0" onchange="selectProvince(0)"><option value="0" >请选择</option>
					<%
					List<DictProvince> provinceList = (List<DictProvince>)request.getAttribute("provinceList");
					for(int i=0;i<provinceList.size();i++){
						DictProvince province = provinceList.get(i);
					
					%>
					<option value="<%=province.getProvinceid() %>"><%=province.getProvincename() %></option>
					<%} %>
					</select>
	 			</div>
	 			<div id="new_city_div_0" style="float:left;margin-top:5px;margin-bottom:5px;position:relative;">
	 				 &nbsp;&nbsp; 
	 				<select  id="new_city_0" name="city" >
	 					<option value="0"  >请选择</option>
					</select>
				</div>
				<br>
				<div style="float:left;">
				<div style="margin-bottom:5px;">
				<span >街道地址：</span><span>中国,</span><span id="newstateAndCity1_0" ></span><span id="newstateAndCity2_0" ></span><input id="new_roadandstreet" name="roadandstreet" maxlength="100" size="50" type="text" />
				</div>
				<div style="margin-bottom:5px;">
				<span >邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：</span><input name="postcode"id="new_postCode"  maxlength="20" type="text"  " /> <span class="text">&nbsp;&nbsp;电&nbsp;&nbsp;话：</span><input id="new_phoneNumber" name="phoneNumber" maxlength="20"  "  type="text" /> 
				</div>
				<div style="margin-bottom:5px;">
				<a onclick="updateAddressChange(0)" class="button" ><span>保存</span></a>
				</div>
				</div>
    </div>
    </form>
  
  <%
  
  if(object!=null){
		addressList = (List<Address>)object;
		if(addressList.size()>0){
			for(int i=0;i<addressList.size();i++){
				 Address address = addressList.get(i);
  %>  
   <form method="post"  action="/CommerceFrame/shoppingCart/addressSubmit.html" name="updateAddressForm">
	<input type="hidden" name="addressid" value="<%=address.getAddressid() %>" />
	<input type="hidden" name="createdtime" value="<%=address.getCreatedtime() %>" />
    <div class="checkout-address-end" id="updateAddress_<%=i%>"
			style="display:none;">
				<div style="float:left;margin-top:5px;margin-bottom:5px;position:relative;">
					<span>收&nbsp;货&nbsp;人：</span> <input class="textbox_4" maxlength="40" name="reciverName" type="text" value="<%=address.getReciverName()%>" />
				</div>
				<div style="float:left;margin-top:5px;margin-bottom:5px;position:relative;" >
					<span >&nbsp;&nbsp</span> 
					<select name="state" id="new_state_<%=address.getAddressid() %>" value="<%=address.getState()%>"  onchange="selectProvince(<%=address.getAddressid() %>)"><option value="0" >请选择</option>
					<%
					for(int j=0;j<provinceList.size();j++){
						DictProvince province = provinceList.get(j);
					
					%>
					<option 
					<%
					if(address.getState().equals(province.getProvinceid().toString())){
					%>
					selected="selected" 
					<%} %>
					
					value="<%=province.getProvinceid() %>"><%=province.getProvincename() %></option>
					<%} %>
					</select>
	 			</div>
	 			<div id="new_city_div_<%=address.getAddressid() %>" style="float:left;margin-top:5px;margin-bottom:5px;position:relative;">
	 				<span >&nbsp;&nbsp;</span> 
	 				<select id="new_city_<%=address.getAddressid() %>" name="city" onchange='selectCity(<%=address.getAddressid() %>)' >
	 				<option value="0">请选择</option>
	 				<%
	 				List<DictCity> cityList =address.getCityList();
	 				for(int z=0;z<cityList.size();z++){
	 					DictCity dictCity = cityList.get(z);
	 				%>
	 				<option 
	 				<%
					if(address.getCity().equals(dictCity.getCityid().toString())){
					%>
					selected="selected" 
					<%} %>
					
	 				value="<%=dictCity.getCityid() %>"><%=dictCity.getCityname() %></option>
	 				<%} %>
	 				</select>
				</div>
				<br>
				<div style="float:left;">
				<div style="margin-bottom:5px;">
				<span >街道地址：</span><span>中国,</span><span id="newstateAndCity1_<%=address.getAddressid() %>" ><%=address.getStateObject().getProvincename() %>,</span><span id="newstateAndCity2_<%=address.getAddressid() %>" ><%=address.getCityObject().getCityname() %>,</span><input  name="roadandstreet" maxlength="100" size="50" value="<%=address.getRoadandstreet()%>"   type="text" />
				</div>
				<div style="margin-bottom:5px;">
				<span >邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：</span><input name="postcode" maxlength="20" type="text" value="<%=address.getPostcode()%>" /> <span class="text">&nbsp;&nbsp;电&nbsp;&nbsp;话：</span><input name="phoneNumber" maxlength="20" value="<%=address.getPhoneNumber()%>"  type="text" />
				</div>
				<div style="margin-bottom:5px;">
				<a id="updateButton_" onclick="updateAddressChange(<%=address.getAddressid() %> )" class="button"><span>保存</span></a>
				</div>
				</div>
    </div>
    </form>
    <%
    }}
  }
    %>
    
<script language="javascript">

var cityArrays = new Array();

function selectProvince(addressId){
	var new_city_array_string = '';
	var flag = false;

	var name_new_state = "new_state_"+addressId;
	var name_new_city_div = "new_city_div_"+addressId;
	var name_newStateAndCity1 = "newstateAndCity1_"+addressId;
	var name_newStateAndCity2 = "newstateAndCity2_"+addressId;

	var provinceId = document.getElementById(name_new_state).value;
	
	if(provinceId==0){
		return;
	}
	
	for(var i=0;i<cityArrays.length;i++){
		var temp = cityArrays[i];
		if(temp[0]==provinceId){
			flag = true;
			document.getElementById(name_new_city_div).innerHTML = temp[1];
		}
	}
	if(!flag){
		$.ajax({
			url: '/CommerceFrame/shoppingCart/selectCityByProvinceId.html',
			type: 'post',
			data: { provinceId: provinceId, addressId:addressId},
			dataType: 'json',
			success: function(json) {
				if (json['success']) {
					var cityStr = json['citys'];
					var cityArray = new Array();
					cityArray.push(provinceId);
					cityArray.push(cityStr);
					cityArrays.push(cityArray);
					document.getElementById(name_new_city_div).innerHTML = cityStr;
				}	
			}
		});
	}
	var display_str = '';
	var new_state = document.getElementById(name_new_state);
	var new_state_value = new_state.options[new_state.selectedIndex].value;
	
	if(new_state_value!=0){
		 var new_state_text = new_state.options[new_state.selectedIndex].text;
		 display_str = display_str+ new_state_text+',';
	 }
	 document.getElementById(name_newStateAndCity1).innerHTML = display_str;
	 document.getElementById(name_newStateAndCity2).innerHTML = '';
}

function selectCity(addressId){
	var name_new_state = "new_state_"+addressId;
	var name_new_city_div = "new_city_div_"+addressId;
	var name_newCity = "new_city_"+addressId;

	var name_newStateAndCity1 = "newstateAndCity1_"+addressId;
	var name_newStateAndCity2 = "newstateAndCity2_"+addressId;
	
	var display_str = '';
	 var new_city = document.getElementById(name_newCity);
	 var new_city_value = new_city.options[new_city.selectedIndex].value;

	 if(new_city_value!=0){
		 var new_city_text = new_city.options[new_city.selectedIndex].text;
		 display_str = display_str+ new_city_text+',';
	 }
	 document.getElementById(name_newStateAndCity2).innerHTML = display_str;
}


function updateAddressChange(addressId){
	var oForms = document.forms;
	var errorMsg = new Array(); 
	for(var i=0;i<oForms.length;i++){
		var form = oForms[i];
		var innserAddressId = form.elements["addressid"].value;
		if(innserAddressId==addressId){
			var reciverName = form.elements["reciverName"].value;
			var state = form.elements["state"].value;
			var city = form.elements["city"].value;
			var roadandstreet = form.elements["roadandstreet"].value;
			var postCode = form.elements["postcode"].value;
			var phoneNumber = form.elements["phoneNumber"].value;

			if(reciverName==''){
				errorMsg.push('收货人名字不能为空');
			}
			if(state=='' || state==0){
				errorMsg.push('省名字不能为空');
			}
			if(city=='' ||state==0){
				errorMsg.push('市名字不能为空');
			}
			if(roadandstreet==''){
				errorMsg.push('街道名字不能为空');
			}
			if(postCode==''){
				errorMsg.push('邮编不能为空');
			}
			if(phoneNumber==''){
				errorMsg.push('电话号码不能为空');
			}
			if(new_reciverName==''){
				errorMsg.push('收货人名字不能为空');
			}
			if(errorMsg.length!=0){
				var error='';
				for(var i=0;i<errorMsg.length;i++){
					error = error+errorMsg[i]+"; ";
				}
				$('#notification').html('<div class="success" style="fontdisplay: none; font-size: 80% ">错误信息：<font color="red"> '+error+'</font><span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
				$('.success').fadeIn('slow');
			}else{
				form.submit();
				return;
			}
		}
	}
}

$("div.sizeDiv").click(
		function () {
			var divs =  $(this).parent().find('div.sizeDiv');
			for(var i=0;i<divs.length;i++){
				$(divs[i]).css('border','1px solid #CDCBC4');
				//$(divs[i]).css('opacity','0.3');
			}
			$(this).css('border','2px solid black');
			size=this.id;
			size_value = this.title;
			if(color!='' && size!=''){
				changeTheQuantiy();
			}
		}	
);

function submitAddressChange(){
	var errorMsg = new Array(); 
	var new_reciverName = document.getElementById("new_reciverName").value;
	var new_state = document.getElementById("new_state").value;
	var new_city = document.getElementById("new_city").value;
	var new_roadandstreet = document.getElementById("new_roadandstreet").value;
	var new_postCode = document.getElementById("new_postCode").value;
	var new_phoneNumber = document.getElementById("new_phoneNumber").value;

	if(new_reciverName==''){
		errorMsg.push('收货人名字不能为空');
	}
	if(new_state=='' || new_state==0){
		errorMsg.push('省名字不能为空');
	}
	if(new_city=='' ||new_city==0){
		errorMsg.push('市名字不能为空');
	}
	if(new_roadandstreet==''){
		errorMsg.push('街道名字不能为空');
	}
	if(new_postCode==''){
		errorMsg.push('邮编不能为空');
	}
	if(new_phoneNumber==''){
		errorMsg.push('电话号码不能为空');
	}
	if(new_reciverName==''){
		errorMsg.push('收货人名字不能为空');
	}
	if(errorMsg.length!=0){
		var error='';
		for(var i=0;i<errorMsg.length;i++){
			error = error+errorMsg[i]+"; ";
		}
		$('#notification').html('<div class="success" style="fontdisplay: none; font-size: 80% ">错误信息：<font color="red"> '+error+'</font><span><img src="/CommerceFrame/resources/images/close.png" alt="" class="close" /></span></div>');
		$('.success').fadeIn('slow');
	}else{
		var newAddressForm = document.getElementById("newAddressForm");
		newAddressForm.submit();
	}
}


function chooseAddress(addressVar,size){
	for(var i=0;i<size;i++){
		var updateAddressDiv = document.getElementById("updateAddress_"+i);
		updateAddressDiv.style.display='none';
	}
	var div = document.getElementById("newAddress");
	if(addressVar==-1){
		div.style.display='block';
	}else{
		div.style.display='none';
	}
	selectedAddressId = addressVar;
}

function updateAddress(index,size,addressId){
	var selectedUpdateAddressDiv = document.getElementById("updateAddress_"+index);
	var selectedUpdateAddressRadio = document.getElementById('updateAddressRadio_'+index);
	var newAddressDiv = document.getElementById("newAddress"); 
	newAddressDiv.style.display='none';
	for(var i=0;i<size;i++){
		var updateAddressDiv = document.getElementById("updateAddress_"+i);
		var updateAddressRadio = document.getElementById("updateAddressRadio_"+i);
		updateAddressDiv.style.display='none';
		updateAddressRadio.checked=false;
	}
	selectedUpdateAddressDiv.style.display='block';
	selectedUpdateAddressRadio.checked=true;
	selectedAddressId = addressId;
}

<c:if test="${addressList!=null}">
<c:forEach var="jsAddress" items="${addressList}" varStatus="status">
	<c:if test="${status.count==1}">
	selectedAddressId = ${jsAddress.addressid};
	</c:if>
</c:forEach>
</c:if>
</script>